<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联元素与块状元素的层叠水平比较</title>
    <style>
        body{margin:100px;}
        div{width: 200px;height: 100px;color:white;}
        div.one {
            background: gold;
            display: inline-block;
            margin-bottom: -12px;
            margin-left:-30px;
        }
        div.two {
            background: darkgreen;
            display: block;
            /*position:relative;*/
        }
    </style>
</head>
<body>
<!--
内联元素层叠顺序比块状高，故第一个元素会遮住第二个元素一部分

但第二个元素的文字部分又在第一个元素用来遮住第二个元素的部分的上面

因为文字属于inline，inline和inline-block是平级,又因为后来居上，故呈现出如此效果
-->
<div class="one">display:inline-block</div>
<div class="two">display:block</div>

</body>
</html>
